<template>
  <el-container>
    <el-header height="140px">
      <el-form label-width="100px" label-position="left" style="margin-top:10px">
        <el-form-item label="按钮名称：">
          <el-input
            v-model="buttonCaption"
            clearable
            style="width:400px"
            @keyup.enter.native="handelKeyDown"
            @clear="handleQuery"
          />
        </el-form-item>
        <el-form-item label="默认权限：">
          <el-radio-group v-model="isDefault" @change="handelStatusChange">
            <el-radio-button label="全部" />
            <el-radio-button label="是" />
            <el-radio-button label="否" />
          </el-radio-group>
        </el-form-item>
        <el-button v-if="btnAip.add.buttonCaption" type="primary" @click="OnBtnAdd">{{ btnAip.add.buttonCaption }}</el-button>
        <el-button v-if="btnAip.query.buttonCaption" type="primary" @click="handleQuery">{{ btnAip.query.buttonCaption }}</el-button>
      </el-form>
    </el-header>
    <el-main :height="mainHeight">
      <el-table
        :data="tableData"
        border
        fit
        empty-text="没有查询到数据"
        highlight-current-row
        :height="mainHeight"
        @sort-change="handelSortChange"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column prop="buttonCaption" label="按钮名称" sortable />
        <el-table-column prop="buttonKey" label="按钮Key" />
        <el-table-column prop="isDefault" label="是否默认权限">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isDefault == true" type="success">是</el-tag>
            <el-tag v-if="scope.row.isDefault == false" type="danger">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="buttonDesc" label="按钮说明" />
        <el-table-column label="操作" fixed="right" width="100px">
          <template slot-scope="scope">
            <span v-if="primission.btnEdit">
              <el-button v-if="btnAip.query.buttonCaption" icon="el-icon-edit" circle @click="handleEdit(scope.$index, scope.row)" />
            </span>
            <span v-if="primission.btnQuery">
              <el-button v-if="btnAip.delete.buttonCaption" icon="el-icon-delete" type="danger" circle @click="handleDelete(scope.$index, scope.row)" />
            </span>           
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="totalCount"
        :current-page="pageIndex"
        @current-change="handlePaging"
      />
    </el-footer>
    <el-dialog title="编辑菜单信息" :visible.sync="dialogVisible" width="30%">
      <el-form ref="formData" :model="formData" label-width="120px" :rules="formRules">
        <el-form-item label="系统编号：" prop="id">
          <el-input v-model="formData.id" placeholder="系统生成" readonly />
        </el-form-item>
        <el-form-item label="按钮名称：" prop="buttonCaption">
          <el-input v-model="formData.buttonCaption" placeholder="请输入按钮名称" />
        </el-form-item>
        <el-form-item label="按钮Key：" prop="buttonKey">
          <el-input v-model="formData.buttonKey" placeholder="请输入按钮Key值" />
        </el-form-item>
        <el-form-item label="是否默认权限：">
          <el-switch v-model="formData.isDefault" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="按钮说明：">
          <el-input v-model="formData.buttonDesc" placeholder="请输入按钮说明" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="OnBtnClose">关闭</el-button>
        <el-button type="primary" @click="OnBtnSaveSubmit">保存</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
import RequestObject from '@/utils/requestObject'
import request from '@/utils/request'
import { MessageBox } from 'element-ui'
import DateUtil from '@/utils/dateUtil'
import AppTreeUtil from '@/utils/appTree'
import height from '@/utils/height'
import { getBtnCtr } from '@/utils/BtnControl'
export default {
  name:"PlatformButton",
  data() {
    return {
      btnAip: '',
      primission: {
        btnAdd: true,
        btnEdit: true,
        btnQuery: true,
        btnDelete: true
      },
      headerHeight: '180px',
      footerHeight: '50px',
      mainHeight: '',
      height: 'height:',
      tableData: null, // table数据模型
      dialogVisible: false, // 编辑窗口是否显示
      formData: {
        // 编辑窗口模型
        id: 0,
        buttonCaption: '',
        buttonKey: '',
        isDefault: true,
        buttonDesc: '',
        createTime: new Date(),
        createId: 0
      },
      formRules: {
        // 数据验证模型
        buttonCaption: [
          {
            required: true,
            message: '请输入按钮名称',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 8,
            message: '按钮名称须在1到8个字符之间',
            trigger: 'blur'
          }
        ],
        buttonKey: [
          {
            required: true,
            message: '请输入按钮Key值',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 12,
            message: '按钮Key值须在1-12个字符之间',
            trigger: 'blur'
          }
        ]
      },
      pageSize: 25, // 分页显示记录条数
      totalCount: 0, // 总记录数
      pageIndex: 1, // 页码
      sortColumn: '', // 排序字段
      sortOrder: '', // 排序规则
      buttonCaption: '', // 菜单名称查询条件
      isDefault: '全部' // 菜单状态
    }
  },
  created() {
    // 动态头部按钮
    this.btnAip = getBtnCtr(
      this.$route.path,
      this.$store.getters.userPermission
    )
    // 初始化表格数据
    this.mainHeight =
      height -
      96 -
      parseInt(this.headerHeight) -
      parseInt(this.footerHeight).toString() +
      'px'
    this.handleQuery()
  },
  methods: {
    handleQuery() {
      var queryConditions = []
      var orderConditions = []
      if (this.buttonCaption && this.buttonCaption.length > 0) {
        queryConditions.push({
          column: 'buttonCaption',
          content: this.buttonCaption,
          condition: 6
        })
      }
      if (this.isDefault != '全部') {
        queryConditions.push({
          column: 'isDefault',
          content: this.isDefault == '是' ? '1' : '0',
          condition: 0
        })
      }
      if (this.sortColumn && this.sortColumn.length > 0) {
        orderConditions.push({
          column: this.sortColumn,
          condition: this.sortOrder
        })
      }
      var queryRequest = RequestObject.CreateGetObject(
        true,
        this.pageSize,
        this.pageIndex,
        queryConditions,
        orderConditions
      )
      request({
        url: '/api/tbuttons',
        method: 'get',
        params: {
          requestObject: JSON.stringify(queryRequest)
        }
      })
        .then(res => {
          this.tableData = res.data
          this.totalCount = res.totalNumber
        })
        .catch(() => {
          this.$message('error')
        })
    },
    OnBtnAdd() {
      this.formData.id = 0
      this.formData.buttonCaption = ''
      this.formData.buttonKey = ''
      this.formData.isDefault = true
      this.formData.buttonDesc = ''
      this.formData.createId = 0
      this.dialogVisible = true
    },
    handleEdit(index, selectedRow) {
      this.formData.id = selectedRow.id
      this.formData.buttonCaption = selectedRow.buttonCaption
      this.formData.buttonKey = selectedRow.buttonKey
      this.formData.isDefault = selectedRow.isDefault
      this.formData.buttonDesc = selectedRow.buttonDesc
      this.dialogVisible = true
    },
    handleDelete(index, selectedRow) {
      this.$confirm('是否确定并删除该按钮信息?', '确认对话框', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showConfirmButton: true
      }).then(() => {
        var deleteData = RequestObject.CreatePostObject(selectedRow.id)
        request({
          url: '/api/tbuttons/byid',
          method: 'delete',
          data: deleteData
        }).then(res => {
          if (res.code == -1) {
            this.$confirm(res.info, '错误信息', {
              confirmButtonText: '确定',
              type: 'error',
              showCancelButton: false
            })
          } else {
            this.$message({
              message: '删除数据成功',
              type: 'success'
            })
            this.handleQuery() // 查询数据
          }
        })
      })
    },
    OnBtnSaveSubmit() {
      this.$refs.formData.validate(valid => {
        if (!valid) {
          this.$message({
            message: '数据不合法，无法保存',
            type: 'error'
          })
        } else {
          var currData = this.GetPostData()
          var currMethod = 'post'
          if (currData.id !== 0) {
            // 修改
            currMethod = 'put'
          }
          var data = RequestObject.CreatePostObject(currData)
          request({
            url: '/api/tbuttons',
            method: currMethod,
            data: data
          }).then(res => {
            if (res.code == -1) {
              this.$confirm(res.info, '错误信息', {
                confirmButtonText: '确定',
                type: 'error',
                showCancelButton: false
              })
            } else {
              this.$message({
                message: '保存数据成功',
                type: 'success'
              })
              this.$refs.formData.resetFields()
              this.dialogVisible = false
              this.handleQuery() // 查询数据
            }
          })
        }
      })
    },
    OnBtnClose() {
      this.dialogVisible = false
      this.$refs.formData.resetFields()
    },
    GetPostData() {
      return {
        id: this.formData.id,
        buttonCaption: this.formData.buttonCaption,
        buttonKey: this.formData.buttonKey,
        isDefault: this.formData.isDefault,
        buttonDesc: this.formData.buttonDesc,
        createId: 0
      }
    },
    handlePaging(index) {
      this.pageIndex = index
      this.handleQuery()
    },
    handelStatusChange() {
      this.handleQuery()
    },
    handelSortChange(currSort) {
      this.sortColumn = currSort.prop
      this.sortOrder = currSort.order == 'ascending' ? 'asc' : 'desc'
      this.handleQuery()
    },
    handelDatePicker() {
      this.handleQuery()
    },
    handelKeyDown() {
      this.handleQuery()
    }
  }
}
</script>
